<template>
    <div>
        <a-spin tip="加载中..." :spinning="loading">
            <div>
                <div class="login">
                    <!-- <img class="login-bg" src="@/assets/login-BG.png" /> -->
                    <div class="particles">
                        <vue-particles color="#409EFF" :particle0pacity="0.7" :particlesNumber="80" shapeType="circle"
                            :particlesize="4" linesColor="#409EFF" :lineswidth="1" :lineLinked="true" :lineopacity="0.4"
                            :linesDistance="150" :movespeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
                            clickMode="push" :style="{height:getWindowHeight}">
                        </vue-particles>
                    </div>
                    <!-- <img class="top-logo" src="@/assets/logo/1.png" /> -->
                    <div class="login-wrap">
                        <div class="ms-login">
                            <div class="ms-title1">锦弘健康管理后台</div>
                            <div class="ms-title">欢迎使用</div>
                            <a-form-model :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                                <a-form-model-item prop="username">
                                    <div style="display: flex;border-bottom: 1px solid #f6f6f649;">
                                        <a-icon type="user" style="color: #1F4FB6;line-height: 30px;font-size: 24px;"></a-icon>
                                        <a-input class="input" v-model="ruleForm.username" placeholder="账号" autocomplete="new-user"></a-input>
                                    </div>
                                </a-form-model-item>
                                <a-form-model-item prop="password">
                                    <div style="display: flex;border-bottom: 1px solid #f6f6f649;">
                                        <a-icon type="lock" style="color: #1F4FB6;line-height: 30px;font-size: 24px"></a-icon>
                                        <a-input type="password" placeholder="密码" v-model="ruleForm.password" autocomplete="new-password"
                                            @keyup.enter.native="login" class="input"></a-input>
                                    </div>
                                    <div class="reset-password" @click="clickRestPass">修改密码</div>
                                </a-form-model-item>
                                <a-form-model-item prop="num">
                                    <div style="display: flex;border-bottom: 1px solid #f6f6f649;">
                                        <a-icon type="safety" style="color: #1F4FB6;line-height: 30px;font-size: 24px"></a-icon>
                                        <a-input class="input" v-model.trim="ruleForm.num" auto-complete="off"
                                            placeholder="请输入验证码" @keyup.enter="login"></a-input>
                                        <div class="login-code" @click="getCode">
                                            <!--验证码组件-->
                                            <s-identify :identifyCode="identifyCode"></s-identify>
                                        </div>
                                    </div>
                                </a-form-model-item>
                                <div class="login-btn">
                                    <a-button type="primary" @click="login" class="button">登录</a-button>
                                </div>
                            </a-form-model>
                            <div class="footer">
                                <p>技术支持：原链科技</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </a-spin>
        <ResetPasswordVue :visible="resetPassVisible" @closeModal="() => resetPassVisible = false" />
    </div>
</template>

<script>
import SIdentify from "../components/authcode";
import nextApi from "@/api/api";
import { getStorageUserInfo } from "@/utils";
import ResetPasswordVue from "@/components/resetPassword.vue";

export default {
    components: { SIdentify, ResetPasswordVue },
    data: function () {
        return {
            resetPassVisible: false,
            loading: false,
            identifyCode: "",
            code: "",
            uuid: "",
            ruleForm: {
                username: "",
                password: "",
                num: "",
            },
            rules: {
                username: [{ required: true, message: "请输入账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                num: [{ required: true, message: "请输入验证码", trigger: "blur" }],
            },
        };
    },
    mounted() {
        // 如果已经登录 直接跳转
        let userInfo = getStorageUserInfo();
        if (userInfo && userInfo.id) {
            this.$router.push("/");
            return;
        }
        this.getCode();
    },
    computed: {
        getWindowHeight() {
            console.log(window);
            return document.body.clientHeight - 10 + "px";
        },
    },
    methods: {
        clickRestPass() {
            this.resetPassVisible = true;
        },
        login() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let data = {
                        name: this.ruleForm.username,
                        pwd: this.ruleForm.password,
                        code: this.ruleForm.num,
                        uuid: this.uuid,
                    };
                    try {
                        this.loading = true;

                        const res = await nextApi.userLogin(data);
                        let userInfo = {
                            ...res.data,
                            permissions: res.data.resourceChildren?.map((item) => item.name) || [],
                        };
                        localStorage.setItem("siteUserInfo", JSON.stringify(userInfo));
                        location.reload();
                    } finally {
                        this.getCode();
                        this.loading = false;
                    }
                } else {
                    return false;
                }
            });
        },
        async getCode() {
            try {
                this.loading = true;
                const res = await nextApi.checkCode();
                this.identifyCode = res.captcha;
                this.uuid = res.uuid;
            } finally {
                this.loading = false;
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.reset-password {
    text-align: right;
    cursor: pointer;
}
.reset-password:hover {
    color: #409eff;
}
.particles {
    position: relative;
}
.input {
    background-color: transparent;
    &:focus {
        box-shadow: unset;
    }
    &:hover {
        background-color: transparent;
    }
}

.login {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.button {
    height: 48px;
    border-radius: 24px;
}

.headers {
    width: 100%;
    color: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    font-size: 25px;
    line-height: 8vh;
    img {
        width: 15rem;
        margin-left: 48px;
        margin-top: 40px;
    }
}
.top-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 250px;
    z-index: 3;
}

.login-wrap {
    position: absolute;
    right: 80px;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 100%;
}

.ms-title {
    width: 100%;
    line-height: 30px;
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: 500;
    font-size: 18px;
    color: #2c2e32;
    text-align: left;
    font-style: normal;
    font-family: PingFangSC-Medium, PingFang SC;
    text-align: center;
}

.ms-title1 {
    font-family: PingFangSC-Medium, PingFang SC;
    width: 100%;
    line-height: 30px;
    font-size: 32px;
    color: #2c2e32;
    text-align: center;
}

.ms-login {
    width: 538px;
    padding: 50px 30px;
    box-sizing: border-box;
    //background: #f1fdf7;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.ms-content {
    padding: 30px 30px;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
    margin-top: 30px;
    background-color: #409eff;
}
.footer {
    width: 100%;
    height: 4vh;
    bottom: 20px;
    left: 0;
    position: absolute;
    text-align: center;
    line-height: 4vh;
    font-size: 14px;
    color: #b3b2b2;
    opacity: 0.5;
}
.login-bg {
    position: absolute;
    height: 100vh;
    left: -9999px;
    right: -9999px;
    top: 0;
    margin: 0 auto;
    z-index: 1;
}
</style>
